<template>
  <div class="exhibition-detail">
    <van-image 
      class="detail-cover" 
      :src="exhibition.cover" 
      fit="cover"
    />
    
    <div class="detail-content">
      <h1 class="title">{{ exhibition.name }}</h1>
      <div class="category">{{ exhibition.category }}</div>
      
      <div class="info-section">
        <div class="info-item">
          <van-icon name="clock-o" />
          <span>{{ exhibition.activityTime }}</span>
        </div>
        <div class="info-item" v-if="exhibition.location">
          <van-icon name="map-marked" />
          <span>{{ exhibition.location }}</span>
		  
        </div>
      </div>
      
      
	 <!-- 展览单元轮播图 -->
    <div class="swiper-section">
      <h2 class="swiper-title">展览单元</h2>
      <van-swipe :loop="false" :width="300" :show-indicators="false">
        <van-swipe-item v-for="(img, index) in unitImages" :key="index">
          <van-image :src="img" fit="cover" height="200" />
        </van-swipe-item>
      </van-swipe>
    </div> 
	 <div class="description">
        <h2>展览简介</h2>
        <p>{{ exhibition.preface }}</p>
      </div> 
      
      
     <!-- 展览产品轮播图 -->
    <div class="swiper-section">
      <h2 class="swiper-title">展览产品</h2>
      <van-swipe :loop="false" :width="300" :show-indicators="false">
        <van-swipe-item v-for="(img, index) in exhibitImages" :key="index">
          <van-image :src="img" fit="cover" height="200" />
        </van-swipe-item>
      </van-swipe>
    </div>
  </div> 
      <div class="full-description">
        <h2>详细内容</h2>
        <p>{{ exhibition.peroration }}</p>
      </div>
    </div>
    <van-button 
        :type="isReserved ? 'default' : 'primary'"
        block
        class="reserve-btn"
        @click="handleReserve"
      >
        {{ isReserved ? '已预约' : '预约参观' }}
      </van-button>
    
    
    
</template>

<script>
import { ref, onMounted, computed } from 'vue';  // 添加computed导入
import { useRoute } from 'vue-router';
import { Image as VanImage, Icon, Button, Toast } from 'vant';
import axios from 'axios';


export default {
  name: 'ExhibitionDetail',
  components: {
    [VanImage.name]: VanImage,
    [Icon.name]: Icon,
    [Button.name]: Button
  },
  setup() {
    const route = useRoute();
	console.log(route.path.split('/')[2]);
	
	const exhibitionId = ref(route.params.id);
	 // console.log(exhibitionId);
    const exhibition = ref({});
    const isReserved = ref(false);
    const isLiked = ref(false);
    const isFavorited = ref(false);
  
    const handleReserve = () => {
      isReserved.value = !isReserved.value;
      Toast.success(isReserved.value ? '预约成功！' : '已取消预约');
    };
    
    const handleLike = () => {
      isLiked.value = !isLiked.value;
      if(isLiked.value) {
        exhibition.value.like++;
      } else {
        exhibition.value.like--;
      }
      Toast.success(isLiked.value ? '点赞成功' : '已取消点赞');
    };
  
    const handleFavorite = () => {
      isFavorited.value = !isFavorited.value;
      if(isFavorited.value) {
        exhibition.value.star++;
      } else {
        exhibition.value.star--;
      }
      Toast.success(isFavorited.value ? '收藏成功' : '已取消收藏');
    };
    
    const unitImages = computed(() => {
      return exhibition.value.unit ? exhibition.value.unit.split(',') : [];
    });
    
    const exhibitImages = computed(() => {
      return exhibition.value.exhibit ? exhibition.value.exhibit.split(',') : [];
    });
    
    onMounted(() => {
      const id = route.path.split('/')[2]-1;
      axios.get(`http://101.35.16.219:9999/v2/exview/getExviewList?id=${id}`)
        .then(response => {
          if (response.data) {
			
            exhibition.value = response.data.data[id];
			console.log(exhibition.value);
          } else {
            Toast.fail('未找到展览详情');
          }
        })
        .catch(error => {
          console.error('获取数据失败:', error);
          Toast.fail('获取展览详情失败');
        });
    });
    
    return {
      exhibition,
      handleReserve,
      handleLike,
      handleFavorite,
      unitImages,
      exhibitImages,
      isReserved,
      isLiked,
      isFavorited
    };
  }
};
</script>

<style scoped>
.exhibition-detail {
  padding-bottom: 50px;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.detail-cover {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.detail-content {
  padding: 16px;
  background-color: white;
  border-radius: 12px 12px 0 0;
  margin-top: -20px;
  position: relative;
  z-index: 1;
}

.reserve-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  margin: 0;
  z-index: 100;
}

.exhibition-detail {
  margin: 20px 0;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.reserve-btn:active {
  transform: scale(0.98);
}

.title {
  font-size: 24px;
  margin-bottom: 8px;
}

.category {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
}

.info-section {
  margin: 16px 0;
  padding: 12px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.info-item .van-icon {
  margin-right: 8px;
}

.description,
.full-description {
  margin: 16px 0;
}

.description h2,
.full-description h2 {
  font-size: 18px;
  margin-bottom: 8px;
}

.description p,
.full-description p {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

/* 新增样式 */
.swiper-section {
  margin: 20px 0;
  padding: 0 16px;
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.swiper-title {
  font-size: 18px;
  margin-bottom: 12px;
  color: #333;
}
</style>
